<template>
  <div class="page-layout">
     <h3>layout component</h3>

     <div class="container-box">

        <mx-container class="container">
          <mx-header class="header">header</mx-header>
          <mx-main>main</mx-main>
          <mx-footer class="footer">footer</mx-footer>
        </mx-container>
        <div class="empty-box-20h"></div>

        <mx-container class="container">
          <mx-main>main</mx-main>
        </mx-container>
        <div class="empty-box-20h"></div>

        <mx-container class="container">
          <mx-aside class="aside">aside</mx-aside>
          <mx-main>main</mx-main>
        </mx-container>
        <div class="empty-box-20h"></div>

        <mx-container class="container">
          <mx-aside class="aside">aside</mx-aside>
          <mx-main>
            <mx-container class="container">
              <mx-header class="header">header</mx-header>
              <mx-main>main</mx-main>
              <mx-footer class="footer">footer</mx-footer>
            </mx-container>
          </mx-main>
        </mx-container>
        <div class="empty-box-20h"></div>

        <mx-container class="container">
          <mx-aside class="aside">aside</mx-aside>
          <mx-main>
            <mx-container class="container">
              <mx-header class="header">header</mx-header>
              <mx-main>main</mx-main>
            </mx-container>
          </mx-main>
        </mx-container>
         <div class="empty-box-20h"></div>

        <mx-container class="container">
          <mx-aside class="aside">aside</mx-aside>
          <mx-main>
            <mx-container class="container">
              <mx-main>main</mx-main>
              <mx-footer class="footer">footer</mx-footer>
            </mx-container>
          </mx-main>
        </mx-container>
        <div class="empty-box-20h"></div>

        <mx-container class="container">
          <mx-aside class="aside">aside</mx-aside>
          <mx-main>
            <mx-container class="container">
              <mx-header class="header">header</mx-header>
              <mx-main>main</mx-main>
              <mx-footer class="footer">footer</mx-footer>
            </mx-container>
            <mx-container class="container">
              <mx-header class="header">header</mx-header>
              <mx-main>main</mx-main>
              <mx-footer class="footer">footer</mx-footer>
            </mx-container>
          </mx-main>
        </mx-container>

     </div>
  </div>
</template>
<script>
export default {
  name: "page-layout"
};
</script>
<style lang="scss">
.page-layout {
  padding: 20px;
  text-align: center;
}
.empty-box-20h{
  height: 20px;
}
.container-box {
  // height: 200px;
  background: #ededed;

  .container {
    min-height: 200px;
    // margin-bottom: 20px;
    background: #ff7d2e;
  }
  .header {
    background: #00cd8f;
  }
  .footer {
    background: #416cff;
  }
  .aside {
    background: rgb(182, 15, 197);
  }
}
</style>
